<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;}
        li{
            list-style: none;
        }
        .menu{
            width: 200px;
            border: 1px solid #dadce0;
            position: fixed;
            z-index: 99999;
            left:-500px;
            display: none;
        }
        .menu .list{
            font-size: 13px;
            text-indent: 13px;
        }
        .menu .list li{
            line-height: 36px;
        }
        .menu .list li + li{
            border-top: 1px solid #dadce0;
        }
    </style>
</head>
<body>
    <div class="menu">
        <ul class="list">
            <li class="copy">复制</li>
            <li class="paste">粘贴</li>
            <li class="cut">剪切</li>
            <li class="refresh">刷新</li>
        </ul>
    </div>
</body>
<script>
    var menu = document.querySelector(".menu");
    var list = document.querySelector(".list");

    document.addEventListener("contextmenu",function(e){
        // 先阻止默认的
        var e = e || window.event;
        if (e.preventDefault) {
            e.preventDefault();
        } else {
            e.returnValue = false;
        }

        // 在显示自己的
        var x = e.clientX;
        var y = e.clientY;
        menu.style.left = x + "px";
        menu.style.top = y + "px";
        menu.style.display = "block";
    })

    // 在文档任意位置按下鼠标 均会消失   
    document.addEventListener("mousedown",function(){
        menu.style.display = "none";
    })

    // 问题:  list上绑定的点击事件不生效 
    // 原因: 在list上按下鼠标的瞬间(mousedown), 先触发自己的(mousedown),有就触发,没有就向父代元素冒泡 -> 知道document -> 触发document的mousedown事件 
    // 注意: 事件传播的前提是 父子元素绑定相同类型的事件

    // 事件传播: 
    // mousedown: li -> list -> menu ->  body -> html -> document
    //     click: li -> list -> menu ->  body -> html -> document

    list.addEventListener("mousedown",function(e){
        var e = e || window.event;
        if(e.stopPropagation){
            e.stopPropagation();
        }else{
            e.cancelBubble = true;
        }
    })


    // click => 鼠标左键单击 (按下并松开)
    list.addEventListener("click",function(e){
        var e = e || window.event;
        var target = e.target;
        if(target.className == "copy"){
            console.log("点击了复制");
            menu.style.display = "none";
        }else if(target.className == "paste"){
            console.log("点击了粘贴");
            menu.style.display = "none";
        }else if(target.className == "cut"){
            console.log("点击了剪切");
            menu.style.display = "none";
        }else if(target.className == "refresh"){
            console.log("点击了刷新");
            location.reload();
            menu.style.display = "none";
        }
    })

</script>
</html>